<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Wilio Survey, Quotation, Review and Register form Wizard by Ansonika.">
    <meta name="author" content="Ansonika">
    <title>Wilio | Survey, Quotation, Review and Register form Wizard</title>

    <!-- Favicons-->
    <link rel="shortcut icon" href="http://www.ansonika.com/wilio/img/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" type="image/x-icon" href="http://www.ansonika.com/wilio/img/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="http://www.ansonika.com/wilio/img/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" href="http://www.ansonika.com/wilio/img/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="http://www.ansonika.com/wilio/img/apple-touch-icon-144x144-precomposed.png">

    <!-- BASE CSS -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://www.ansonika.com/wilio/css/menu.css" rel="stylesheet">

    <!-- ICON -->
    <link href="https://cdn.bootcss.com/ionicons/4.5.6/css/ionicons.min.css" rel="stylesheet">

    <!--    <link href="http://www.ansonika.com/wilio/css/style.css" rel="stylesheet">-->
    <!--    <link href="http://www.ansonika.com/wilio/css/vendors.css" rel="stylesheet">-->

    <style>
/*
        html,body {
            height: 100%
        }

        html * {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        body {
            background: #fff;
            font-size: 0.875rem;
            line-height: 1.4;
            font-family: "微软雅黑","宋体",Arial,sans-serif;
            color: #555
        }

        h1,h2,h3,h4,h5,h6 {
            color: #222
        }

        p {
            margin-bottom: 25px
        }

        strong {
            font-weight: 500
        }

        label {
            font-weight: 400;
            margin-bottom: 3px;
            color: #222
        }

        hr {
            margin: 30px 0 30px 0;
            border-color: #ddd
        }

        ul,ol {
            list-style: none;
            margin: 0 0 25px 0;
            padding: 0
        }

        a {
            color: #434bdf;
            text-decoration: none;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            outline: none
        }

        a:hover,a:focus {
            color: #111;
            text-decoration: none;
            outline: none
        }

        a.animated_link {
            position: relative;
            text-decoration: none
        }

        a.animated_link {
            position: relative;
            text-decoration: none
        }

        a.animated_link:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: -5px;
            opacity: 1;
            left: 0;
            background-color: #434bdf;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease
        }

        a.animated_link:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1)
        }

        a.animated_link.active {
            position: relative;
            text-decoration: none;
            color: #434bdf
        }

        a.animated_link.active:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: -5px;
            opacity: 1;
            left: 0;
            background-color: #434bdf;
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1)
        }

        a.btn-primary:hover,.btn-primary:hover {
            background-color: #d80075;
            border-color: #d80075;
        }

        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            bottom: 0;
            background-color: #fff;
            z-index: 999999
        }

        [data-loader="circle-side"] {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            -webkit-animation: circle infinite .95s linear;
            -moz-animation: circle infinite .95s linear;
            -o-animation: circle infinite .95s linear;
            animation: circle infinite .95s linear;
            border: 2px solid #333;
            border-top-color: rgba(0,0,0,0.2);
            border-right-color: rgba(0,0,0,0.2);
            border-bottom-color: rgba(0,0,0,0.2);
            border-radius: 100%
        }

        @-webkit-keyframes circle {
            0% {
                -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0)
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        @-moz-keyframes circle {
            0% {
                -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0)
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        @-o-keyframes circle {
            0% {
                -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0)
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        @keyframes circle {
            0% {
                -webkit-transform: rotate(0);
                -ms-transform: rotate(0);
                -o-transform: rotate(0);
                transform: rotate(0)
            }

            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        .row-height {
            height: 100vh
        }

        @media (max-width: 991px) {
            .row-height {
                height:auto
            }
        }

        @media (max-width: 991px) {
            .content-left-wrapper figure img {
                height:150px
            }
        }

        .content-left-wrapper h2 {
            color: #fff;
            font-size: 32px;
            font-size: 2rem;
            margin: 20px 0 15px 0;
            font-weight: 400
        }

        @media (max-width: 767px) {
            .content-left-wrapper h2 {
                font-size:26px;
                font-size: 1.625rem
            }
        }

        .content-left-wrapper p {
            font-size: 15px;
            font-size: 0.9375rem;
            opacity: 0.8
        }

        @media (max-width: 767px) {
            .content-left-wrapper p {
                font-size:14px;
                font-size: 0.875rem
            }
        }

        a#logo {
            position: absolute;
            left: 20px;
            top: 15px;
            display: block;
            height: 35px
        }

        @media (max-width: 991px) {
            a#logo {
                left:15px;
                top: 10px
            }
        }

        #social ul {
            margin: 0;
            padding: 0;
            text-align: center
        }

        #social ul li {
            float: left;
            margin: 0 5px 10px 0;
            list-style: none
        }

        #social ul li a {
            color: #fff;
            opacity: 0.6;
            text-align: center;
            line-height: 35px;
            display: block;
            font-size: 16px;
            font-size: 1rem;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out
        }

        #social ul li a:hover {
            opacity: 1
        }

        .copy {
            position: absolute;
            bottom: 25px;
            left: 0;
            width: 100%;
            opacity: 0.5
        }

        @media (max-width: 991px) {
            .copy {
                display:none
            }
        }

        #left_form {
            text-align: center
        }

        #left_form h2 {
            font-size: 28px;
            font-size: 1.75rem;
            color: #0686D8
        }

        @media (max-width: 767px) {
            #left_form figure img {
                height:130px;
                width: auto
            }
        }

        input#website {
            display: none
        }

        #wizard_container {
            width: 700px;
            margin: 0 auto;
        }

        @media (max-width: 767px) {
            #wizard_container {
                width:100%
            }
        }

        h3.question {
            margin: 0 0 20px 0;
            padding: 0;
            line-height: 150%;
            font-weight: 500;
            font-size: 18px;
            font-size: 1.125rem
        }

        h3.question strong {
            color: #999;
        }

        #top-wizard {
            padding-bottom: 20px
        }

        #middle-wizard {
            min-height: 330px
        }

        @media (max-width: 991px) {
            #middle-wizard {
                min-height:inherit
            }
        }

        .summary ul {
            margin: 0;
            padding: 0
        }

        .summary ul li {
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #ededed;
            position: relative;
            padding-left: 45px;
            margin-bottom: 25px
        }

        .summary ul li:last-child {
            margin-bottom: 0;
            border-bottom: none
        }

        .summary ul li strong {
            display: block;
            line-height: 26px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            border: 2px solid #ddd
        }

        .summary ul li h5 {
            padding-top: 6px;
            font-size: 15px;
            font-size: 0.9375rem;
            font-weight: 500;
            color: #0686D8
        }

        .summary ul li ul {
            margin: 20px 0 25px 0;
            padding: 0
        }

        .summary ul li ul li {
            margin: 0;
            padding: 0;
            border-bottom: 0
        }

        .summary label {
            font-weight: 500
        }

        .inlinesvg .svg svg {
            display: inline
        }

        header {
            position: relative;
            padding: 15px 0;
            background-color: #fff;
            border-bottom: 1px solid #d9e1e6
        }

        header .cd-nav-trigger {
            top: -5px !important
        }

        header #social {
            right: 80px;
            top: 0
        }

        header #social ul li a {
            color: #333
        }



        .form-group {
            position: relative
        }

        .form-group.terms {
            padding: 12px 0 0 0
        }

        .form-group i {
            font-size: 18px;
            font-size: 1.125rem;
            position: absolute;
            right: 5px;
            top: 11px;
            color: #ccc;
            width: 25px;
            height: 25px;
            display: block;
            font-weight: 400 !important
        }

        .container_radio.version_2 .error,.container_check.version_2 .error {
            left: -15px;
            top: -30px;
            right: inherit
        }

        .radio_input .error {
            left: -15px;
            top: -30px;
            right: inherit
        }

        .styled-select span.error {
            top: -20px
        }

        .terms span.error {
            top: -30px;
            left: -15px;
            right: inherit
        }

        .form-control {
            border: 1px solid #d2d8dd;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            border-radius: 3px;
            font-size: 14px;
            font-size: 0.875rem;
            height: calc(2.55rem + 2px)
        }
*/
footer {
    border-top: 1px solid #ededed;
    padding: 10px 0
}

footer p {
    margin: 0;
    padding: 0;
    float: right
}

@media (max-width: 991px) {
    footer p {
        float:none
    }
}

footer ul {
    float: left;
    margin: 0;
    padding: 0
}

@media (max-width: 991px) {
    footer ul {
        float:none;
        margin-top: 10px
    }
}

footer ul li {
    display: inline-block;
    margin-right: 15px
}

footer ul li:after {
    content: "|";
    font-weight: 300;
    position: relative;
    left: 9px;
    color: #999
}

footer ul li:last-child {
    margin-right: 0
}

footer ul li:last-child:after {
    content: ""
}

footer ul li a {
    color: #555
}

footer ul li a:hover {
    color: #121921
}


        .form-control:focus {
            box-shadow: none;
            border-color: #434bdf
        }

        .container_check {
            display: block;
            position: relative;
            padding-left: 30px;
            line-height: 1.3;
            margin-bottom: 10px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .container_check input {
            position: absolute;
            opacity: 0;
            cursor: pointer
        }

        .container_check input:checked ~ .checkmark {
            background-color: #434bdf;
            border: 1px solid transparent
        }

        .container_check .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            border: 1px solid #d2d8dd;
            background-color: #fff;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            border-radius: 3px;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out
        }

        .container_check .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 7px;
            top: 3px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .container_check.version_2 {
            padding: 6px 0 0 45px;
            min-height: 30px
        }

        .container_check.version_2 .checkmark {
            height: 30px;
            width: 30px
        }

        .container_check.version_2 .checkmark:after {
            left: 12px;
            top: 8px;
            width: 5px;
            height: 10px
        }

        .container_check input:checked ~ .checkmark:after {
            display: block
        }

        .container_radio {
            display: block;
            position: relative;
            padding-left: 30px;
            line-height: 1.3;
            margin-bottom: 10px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .container_radio input {
            position: absolute;
            opacity: 0
        }

        .container_radio input:checked ~ .checkmark:after {
            opacity: 1
        }

        .container_radio .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 20px;
            width: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 50%
        }

        .container_radio .checkmark:after {
            display: block;
            content: "";
            position: absolute;
            opacity: 0;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            top: 3px;
            left: 3px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #434bdf;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out
        }

        .container_radio.version_2 {
            font-size: 16px;
            padding: 6px 0 0 45px;
            min-height: 30px
        }

        .container_radio.version_2 input:checked ~ .checkmark:before {
            opacity: 1
        }

        .container_radio.version_2 .checkmark {
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            width: 30px;
            border: 1px solid #ccc;
            border-radius: 50%
        }

        .container_radio.version_2 .checkmark:after {
            width: 30px;
            height: 30px;
            top: -1px;
            left: -1px
        }

        .container_radio.version_2 .checkmark:before {
            display: block;
            content: "";
            position: absolute;
            opacity: 0;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            left: 12px;
            top: 8px;
            width: 5px;
            height: 10px;
            border: solid white;
            z-index: 999;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .radio_input .container_radio {
            display: inline-block;
            margin: 12px 0 0 12px
        }

        input.form-control-line{
            border-top:none;
            border-left: none;
            border-right: none;
            border-bottom: 1px #333 solid;
            border-radius: 0;
            text-align: center;
        }

        article.question{
            margin: 0 0 20px 0;
            padding: 0;
            line-height: 150%;
            font-weight: 500;
            font-size: 20px;
        }

        article.question.form-inline{
            display:inline;
        }
        section{
            font-size: 18px;
        }
    </style>


    <!-- MODERNIZR MENU
    <script src="https://cdn.bootcss.com/modernizr/2.8.3/modernizr.min.js"></script>
    -->
</head>

<body>

<div id="preloader">
    <div data-loader="circle-side"></div>
</div><!-- /Preload -->

<nav>
    <ul class="cd-primary-nav">
        <li><a href="index.html" class="animated_link">Home</a></li>
        <li><a href="quotation-wizard-version.html" class="animated_link">Quote Version</a></li>
        <li><a href="review-wizard-version.html" class="animated_link">Review Version</a></li>
        <li><a href="registration-wizard-version.html" class="animated_link">Registration Version</a></li>
        <li><a href="about.html" class="animated_link">About Us</a></li>
        <li><a href="contacts.html" class="animated_link">Contact Us</a></li>
    </ul>
</nav>
<!-- /menu -->

<div class="container-fluid full-height">
    <div class="row row-height">

        <div class="col-lg" id="start">
            <div id="wizard_container">
                <div id="top-wizard">
                    <div id="progressbar"></div>
                </div>
                <!-- /top-wizard -->
                <form id="wrapped" method="POST">
                    <!-- Leave for security protection, read docs for details -->
                    <div id="middle-wizard">
                        <div class="step">
                            <article class="question"><strong>1.</strong>
                                Which blue word starts with <b>p</b>?
                            </article>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">1</span>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>
                            </div>


                            <article class="question"><strong>2.</strong>
                                Which blue word starts with <b>p</b>?
                            </article>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">2</span>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>
                            </div>

                            <section class="form-group form-inline">
                                <p class="form-check-label">
                                    2. Which blue word starts with <b>j</b>?
                                    <input type="text" class="form-control form-control-line">
                                </p>
                            </section>

                            <section class="form-group form-inline">
                                <p class="form-check-label">
                                    3. Which blue word rhymes with <b>last</b>?
                                    <input type="text" class="form-control form-control-line">
                                </p>
                            </section>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">1</span>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>
                            </div>


                            <div class="form-group">
                                <input type="text" name="lastname" class="form-control required" placeholder="Last Name">
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" class="form-control required" placeholder="Your Email">
                            </div>
                            <div class="form-group">
                                <div class="styled-select clearfix">
                                    <select class="form-control required" name="country">
                                        <option value="">Your Country</option>
                                        <option value="Europe">Europe</option>
                                        <option value="Asia">Asia</option>
                                        <option value="North America">North America</option>
                                        <option value="South America">South America</option>
                                        <option value="Oceania">Oceania</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <div class="form-group">
                                        <input type="text" name="age" class="form-control" placeholder="Age">
                                    </div>
                                </div>
                                <div class="col-9">
                                    <div class="form-group radio_input">
                                        <label class="container_radio">Male
                                            <input type="radio" name="gender" value="Male" class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                        <label class="container_radio">Female
                                            <input type="radio" name="gender" value="Female" class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row -->
                            <div class="form-group terms">
                                <label class="container_check">Please accept our <a href="#" data-toggle="modal" data-target="#terms-txt">Terms and conditions</a>
                                    <input type="checkbox" name="terms" value="Yes" class="required">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>

                        <div class="step">
                            <article class="question"><strong>1/5</strong>
                                <br />My dog Pete can <span class="text-primary">play</span>.
                                <br />He can <span class="text-primary">jump</span>.
                                <br />He can <span class="text-primary">run fast</span>. I <span class="text-primary">ran</span> with Pete.
                            </article>

                            <section class="form-group form-inline">
                                <p class="form-check-label">
                                    1. Which blue word starts with <b>p</b>?
                                    <input type="text" class="form-control form-control-line">
                                </p>
                            </section>

                            <section class="form-group form-inline">
                                <p class="form-check-label">
                                    2. Which blue word starts with <b>j</b>?
                                    <input type="text" class="form-control form-control-line">
                                </p>
                            </section>

                            <section class="form-group form-inline">
                                <p class="form-check-label">
                                    3. Which blue word rhymes with <b>last</b>?
                                    <input type="text" class="form-control form-control-line">
                                </p>
                            </section>

                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">1</span>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">2</span>
                                    </div>
                                    <input type="text" class="form-control">
                                </div>
                            </div>

                            <div class="form-group">
                                <input type="text" name="lastname" class="form-control required" placeholder="Last Name">
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" class="form-control required" placeholder="Your Email">
                            </div>
                            <div class="form-group">
                                <div class="styled-select clearfix">
                                    <select class="form-control required" name="country">
                                        <option value="">Your Country</option>
                                        <option value="Europe">Europe</option>
                                        <option value="Asia">Asia</option>
                                        <option value="North America">North America</option>
                                        <option value="South America">South America</option>
                                        <option value="Oceania">Oceania</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-3">
                                    <div class="form-group">
                                        <input type="text" name="age" class="form-control" placeholder="Age">
                                    </div>
                                </div>
                                <div class="col-9">
                                    <div class="form-group radio_input">
                                        <label class="container_radio">Male
                                            <input type="radio" name="gender" value="Male" class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                        <label class="container_radio">Female
                                            <input type="radio" name="gender" value="Female" class="required">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <!-- /row -->
                            <div class="form-group terms">
                                <label class="container_check">Please accept our <a href="#" data-toggle="modal" data-target="#terms-txt">Terms and conditions</a>
                                    <input type="checkbox" name="terms" value="Yes" class="required">
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                        <!-- /step-->
                        <div class="step">
                            <article class="question"><strong>2/5. </strong>
                                杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：
                            </article>
                            <section class="form-group">
                                <label class="container_radio version_2">
                                    <button type="button" class="btn btn-outline-primary" data-toggle="button" autocomplete="off">
                                        致君尧舜上，再使风俗淳
                                    </button>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_radio version_2">众里寻他千百度，玩中啊发送
                                    <input type="radio" name="question_1" value="Quite Satisfied" class="required" onchange="getVals(this, 'question_1');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_radio version_2">三大撒旦发顺丰暗示的方法
                                    <input type="radio" name="question_1" value="Satisfied" class="required" onchange="getVals(this, 'question_1');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_radio version_2">暗示的方式对发生的发暗示的方法
                                    <input type="radio" name="question_1" value="Completely Satisfied" class="required" onchange="getVals(this, 'question_1');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>

                            <section class="form-group">
                                <label class="container_radio version_2">慰问慰问玩儿
                                    <input type="radio" name="question_1" value="Extremely Satisfied" class="required" onchange="getVals(this, 'question_1');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                        </div>
                        <!-- /step-->
                        <div class="step">
                            <article class="question form-inline">
                                <strong>2/6. </strong>
                                杜甫的思想核
                                <input type="text" class="form-control form-control-line m-2">
                                杜甫的思 想核心是儒家的仁政思想
                                <input type="text" class="form-control form-control-line m-3">

                            </article>

                            <section class="form-group">
                                <label class="container_check version_2">A friend of mine
                                    <input type="checkbox" name="question_2[]" value="A friend of mine" class="required" onchange="getVals(this, 'question_2');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_check version_2">Print Advertise
                                    <input type="checkbox" name="question_2[]" value="Print Advertise" class="required" onchange="getVals(this, 'question_2');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_check version_2">Newspaper
                                    <input type="checkbox" name="question_2[]" value="Newspaper" class="required" onchange="getVals(this, 'question_2');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_check version_2">Other
                                    <input type="checkbox" name="question_2[]" value="Other" class="required" onchange="getVals(this, 'question_2');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                        </div>
                        <!-- /step-->
                        <div class="step">
                            <article class="question"><strong>4/5</strong>Do you think to suggest our company to a friend or parent?</article>
                            <section class="form-group">
                                <label class="container_radio version_2">No
                                    <input type="radio" name="question_3" value="No" class="required" onchange="getVals(this, 'question_3');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_radio version_2">Maybe
                                    <input type="radio" name="question_3" value="Maybe" class="required" onchange="getVals(this, 'question_3');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_radio version_2">Probably
                                    <input type="radio" name="question_3" value="Probably" class="required" onchange="getVals(this, 'question_3');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label class="container_radio version_2">100% Sure
                                    <input type="radio" name="question_3" value="100% Sure" class="required" onchange="getVals(this, 'question_3');">
                                    <span class="checkmark"></span>
                                </label>
                            </section>
                            <section class="form-group">
                                <label>In no, please describe with few words why</label>
                                <textarea name="additional_message" class="form-control" style="height:100px;" placeholder="Type here additional info..." onkeyup="getVals(this, 'additional_message');"></textarea>
                            </section>
                        </div>
                        <!-- /step-->
                        <div class="step">
                            <article class="question"><strong>5/5</strong>Summary</article>
                            <div class="summary">
                                <ul>
                                    <li><strong>1</strong>
                                        <h5>How do rate your overall satisfaction about the service provided?</h5>
                                        <p id="question_1"></p>
                                    </li>
                                    <li><strong>2</strong>
                                        <h5>How did you hear about our company?</h5>
                                        <p id="question_2"></p>
                                    </li>
                                    <li><strong>3</strong>
                                        <h5>Do you think to suggest our company to a friend or parent?</h5>
                                        <p id="question_3"></p>
                                        <p id="additional_message"></p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /step-->
                    </div>

                </form>

                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
        </div>
    </div>
    <!-- /row-->
</div>
<!-- /container-fluid -->

<div class="cd-overlay-nav">
    <span></span>
</div>
<!-- /cd-overlay-nav -->

<div class="cd-overlay-content">
    <span></span>
</div>
<!-- /cd-overlay-content -->

<a href="#0" class="cd-nav-trigger">Menu<span class="cd-icon"></span></a>
<!-- /menu button -->

<footer class="fixed-bottom bg-light">
    <div class="container">
        内容区域
        <button type="button" class="btn btn-primary float-right">
            <i class="ion ion-md-arrow-round-forward"></i>
            Checkout
        </button>
    </div>
</footer>

<!-- COMMON SCRIPTS -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(function () {
        $("#preloader").hide();
    })
</script>

</body>
</html>
